import Menu from "@/components/common/menu";
import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep'
const Home = () => {

    const [couponlist, setCouponList] = React.useState<any[]>([])
    const [hasMore, setHasMore] = React.useState(false)
    const [page, setPage] = React.useState(1)
    const [list, setList] = React.useState([])
    const [keywords, setKeywords] = React.useState('')

    React.useEffect(() => {
        GetCouponData();
    }, [])

    const GetCouponData = async() =>
    {
        let result = await React.HTTP.post('/coupon/index');

        if(result.code == 1)
        {
            setCouponList(result.data)
        }
    }
    
    React.useEffect(() => {
        getHotelListData();
    }, [])

    React.useEffect(() => {
        onRefresh();
    }, [keywords])

    // 滚动底部加载
    const loadMore = async () => {
        await sleep(1000)
        getHotelListData();
    }

    // 下拉刷新
    const onRefresh = async () => {
        setPage(1);
        setList([]);
        setHasMore(true);

        await sleep(1000)
        getHotelListData();
    }

    const getHotelListData = async () => {
        let result = await React.HTTP.post('/room/index', {
            page: page,
            keywords: keywords
        });

        if (result.code === 0) {
            //没有更多数据
            setHasMore(false);
            return false;
        }
        else {
            //设置分页和列表合并
            setHasMore(true);
            setPage(page + 1);
            setList(list.concat(result.data));
        }
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/index.css"></link>
            <React.UI.Swiper loop={true} autoplay>
                {
                    couponlist.map((item:any) =>{
                        return(
                            <React.UI.Swiper.Item key={item.id} onClick={() => React.navigate(`/coupon/info?cid=${item.id}`)}>
                                <React.UI.Image src={item.thumb_text}  height={237}  fit='cover' />
                            </React.UI.Swiper.Item>
                        )
                    })
                }
            </React.UI.Swiper>

            <div className="hotel_search">
                <React.UI.Input
                    placeholder='请输入酒店名称或者房型'
                    value={keywords}
                    onChange={(val:string) => {
                        setKeywords(val)
                    }}
                />
            </div>

            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="hotellist">
                    {
                        list.map((item:any) =>{
                            return(
                                <div className="item" key={item.id}>
                                    <React.Router.NavLink to={`/room/info?roomid=${item.id}`} >
                                        <div className="images">
                                            <div className="swipers">
                                                <img src={item.thumb_text} alt="" />
                                            </div>
                                            <div className="title">{item.name}</div>
                                        </div>
                                        <div>
                                            <div className="item_top">
                                                {
                                                    item.flag_text && item.flag_text.map((flag:string, index:number) =>{
                                                        return(
                                                            <span key={index}>{flag}</span>
                                                        )
                                                    })
                                                }
                                            </div>
                                            <div className="item_bot">
                                                <div className="font">
                                                    <span className="price">￥{item.price}/晚</span>
                                                </div>
                                                <div className="btn">立即预定</div>
                                            </div>
                                        </div>
                                    </React.Router.NavLink>
                                </div>
                            )
                        })
                    }
                </div>
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>

            <div style={{ height: '55px' }}></div>

            <Menu />
        </>
    )
}

export default Home